<template>
	<view class='page'>
		<cu-custom isBack>
			<view  slot="content" v-if='form.teamId'>添加档案</view>
			<view  slot="content" v-else>添加{{type == '1'? '基础' : '成长'}}档案</view>
		</cu-custom>
		<view class='headBg'></view>
		
		<view class='container'>
			<template v-if='type == "1"'>
				<view class='title'>标题</view>
				<view class='input'>
					<input type="text"  v-model='form.title' :maxlength="50" placeholder='请输入标题' placeholderClass='archivePlaceholder' />
				</view>
			</template>
			
			<view class='title'>档案描述</view>
			<view class='textarea'>
				<ws-textarea v-model='form.content' :maxlength='desLength' :placeholder='type=="1"?"请输入关于宠物的描述" : "输入档案描述内容"' 
					placeholderClass='archivePlaceholder'></ws-textarea>
				<view class='length'>{{form.content.length}}/{{desLength}}</view>
			</view>
			
			<view class='pic-box'  v-if='type == "2"'>
				<view class='tabs'>
					<view class='tab-item' :class='{active: tabActive == item.value}' v-for='item in tabs' :key='item.value'
						@click='handleChagneTab(item)'>
						{{item.name}}
					</view>
				</view>
				<view class='pics'>
					<imgUpload v-if='tabActive == "image"' v-model='form.images' :limit='9'></imgUpload>
					<videoUpload v-else v-model='form.videos' :limit='1'></videoUpload>
				</view>
			</view>
		</view>
		
		<view class='foot-bar'>
			<view class='submit' @click='handleSubmit'>确定</view>
		</view>
	</view>
</template>

<script>
	import {addRecord_base} from '@/api/pet/archive/base'
	import {addRecord_growth} from '@/api/pet/archive/growth'
	
	import imgUpload from '@/pages/components/imgUpload/index'
	import videoUpload from '@/pages/components/videoUpload/index'
	export default {
		components: {
			imgUpload,
			videoUpload
		},
		data() {
			return {
				type: '1',
				tabActive: 'image',
				tabs: [{
					name: '上传图片',
					value: 'image'
				},{
					name: '上传视频',
					value: 'video'
				}],
				desLength: 500,
				form: {
					cargoId: undefined,
					title: undefined,
					content: '',
					images: undefined,
					videos: undefined,
					teamId: undefined
				}
			}
		},
		onLoad(e) {
			this.type = e.type;
			this.form.cargoId =  e.cargoId
			this.form.teamId = e.isServe == 1? uni.getStorageSync('pet_team').teamId : undefined
		},
		methods: {
			reset(){
				this.form = {
					cargoId: undefined,
					title: undefined,
					content: '',
					images: undefined,
					videos: undefined,
					teamId: this.form.teamId
				}
			},
			handleChagneTab(e) {
				if(this.tabActive == e.value) return;
				this.tabActive = e.value;
				this.form.pics  = '';
			},
			handleSubmit() {
				if(this.type == '1' && !this.form.title) return uni.showToast({title: '请输入标题',icon: 'none'})
				if(!this.form.cargoId) return uni.showToast({title: '没有宠物信息，请返回宠物页面绑定宠物',icon: 'none'})
				if(!this.form.content) return uni.showToast({title: '请填写描述',icon: 'none'})
				if(this.type == '2' && this.tabActive == 'image' && !this.form.images) return uni.showToast({title: '请上传图片',icon: 'none'})
				if(this.type == '2' && this.tabActive == 'video' && !this.form.videos) return uni.showToast({title: '请上传视频',icon: 'none'})
				uni.showLoading({mask: true})
				if(this.type == '1') {
					addRecord_base(this.form).then(res => {
						this.reset()
						this.successCallback()
					})
				} else {
					addRecord_growth(this.form).then(res => {
						this.reset()
						this.successCallback()
					})
				}
			},
			successCallback() {
				let pages = getCurrentPages();
				let backPage = pages[pages.length - 2];
				// backPage.$vm.handlePathInit && backPage.$vm.handlePathInit('init')
				backPage.$vm.init && backPage.$vm.init('petArchive')
				uni.showToast({title: '操作成功',icon: 'none'})
				let timer = setTimeout(() => {
					uni.navigateBack()
				}, 500)
			}
		}
	}
</script>

<style>
	.archivePlaceholder {
		/* color: #BBBBBB; */
	}
</style>
<style scoped lang="scss">
	.page {
		width: 100%;
		min-height: 100vh;
		background-color: #F8F8F8;
	}
	
	.headBg {
		width: 100%;
		height: 750rpx;
		background: linear-gradient( 180deg, var(--primaryBg) 0%, rgba(255,227,89,0) 100%);
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.container {
		width: 718rpx;
		margin-left: 16rpx;
		background: #FFFFFF;
		border-radius: 32rpx;
		padding: 40rpx 30rpx;
		position: relative;
		z-index: 2;
		
		.title {
			font-weight: 600;
			font-size: 30rpx;
			color: var(--h1Color) ;
			line-height: 42rpx;
		}
		
		.input {
			margin-top: 24rpx;
			width: 100%;
			height: 90rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			padding: 0 28rpx 0 28rpx;
			font-size: 30rpx;
			margin-bottom: 40rpx;
			
			input {
				width: 100%;
				height: 100%;
			}
		}
		
		.textarea {
			margin-top: 24rpx;
			width: 100%;
			height: 400rpx;
			background: #F8F8F8;
			border-radius: 8rpx;
			padding: 24rpx 28rpx 60rpx 24rpx;
			position: relative;
			font-size: 30rpx;
			
			.length {
				position: absolute;
				bottom: 24rpx;
				right: 28rpx;
				font-size: 24rpx;
				color: var(--h4Color) ;
			}
		}
		
		.pic-box {
			margin-top: 40rpx;
			border-top: 2rpx solid #EEEEEE;
			padding-top: 40rpx;
			padding-bottom: 200rpx;
			
			.tabs {
				display: flex;
				align-items: center;
				
				.tab-item {
					width: max-content;
					height: 64rpx;
					padding: 0 24rpx;
					border-radius: 8rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					color: var(--h1Color);
					background: #F5F5F5;
					margin-right: 12rpx;
					
					&.active {
						background: var(--primaryBg);
					}
				}
			}
			
			.pics {
				margin-top: 40rpx;
			}
		}
	}
	
	.foot-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 180rpx;
		background: #FFFFFF;
		z-index:99;
		.submit {
			width: 686rpx;
			height: 96rpx;
			background: var(--primaryBg);
			border-radius: 48rpx;
			margin-left: 32rpx;
			margin-top: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 600;
			font-size: 32rpx;
			color: var(--h1Color);
		}
	}
</style>